<!-- 订单按钮组件 -->
<template>
  <view>
    <!-- 下列判断的状态不显示操作按钮 -->
    <template
      v-if="
        item.sonStatus != '71' &&
        item.sonStatus != '72' &&
        item.sonStatus != '73' &&
        item.sonStatus != '74' &&
        item.sonStatus != '61' &&
        item.sonStatus != '62' &&
        item.sonStatus != '63' &&
        item.sonStatus != '64' &&
        item.sonStatus != '65' &&
        item.sonStatus != '54'
      "
    >
      <view class="disFlxAC flexEnd pa-15 borderT">
        <view class="btnBox">
          <u-button
            shape="circle"
            :customStyle="{ height: '52rpx', fontSize: '28rpx' }"
            @click="cancelOrder(item)"
            >{{
              item.sonStatus == "10" || item.sonStatus == "11"
                ? "关闭订单"
                : "取消订单"
            }}</u-button
          >
        </view>

        <!-- 待用户付款 -->
        <view v-if="item.sonStatus == '11'" class="btnBox">
          <u-button
            type="primary"
            shape="circle"
            :customStyle="{ height: '52rpx', fontSize: '28rpx' }"
            @click="orderPlay(item)"
            >立即支付</u-button
          >
        </view>

        <!-- 即时咨询 && 主动呼叫 -->
        <view
          v-if="
            item.callType == 1 &&
            (item.sonStatus == '21' || item.sonStatus == '22')
          "
          class="btnBox"
        >
          <u-button
            type="primary"
            shape="circle"
            :customStyle="{ height: '52rpx', fontSize: '28rpx' }"
            @click="callNow(item)"
            >呼叫</u-button
          >
        </view>

        <!-- 即时咨询 && 加入会议 -->
        <view
          v-if="item.callType == 1 && item.sonStatus == '23'"
          class="btnBox"
        >
          <u-button
            type="primary"
            shape="circle"
            :customStyle="{ height: '52rpx', fontSize: '28rpx' }"
            @click="joining(item)"
            >加入会议</u-button
          >
        </view>

        <!-- 预约咨询 && 待签到 -->
        <view
          v-if="item.callType == 2 && item.sonStatus == '52'"
          class="btnBox"
        >
          <u-button
            type="primary"
            shape="circle"
            :customStyle="{ height: '52rpx', fontSize: '28rpx' }"
            @click="signIn(item)"
            >立即签到</u-button
          >
        </view>
      </view>
    </template>
    <!-- 待收货 -->
    <template v-else-if="item.sonStatus == '64'">
      <view class="disFlxAC flexEnd pa-15 borderT">
        <view class="btnBox">
          <u-button
            type="primary"
            shape="circle"
            :customStyle="{ height: '52rpx', fontSize: '28rpx' }"
            @click="openConfirmReceipt(item)"
            >确认收货</u-button
          >
        </view>
      </view>
    </template>
    <!-- 即时咨询 && 24H重呼 -->
    <template
      v-else-if="
        item.callType == 1 &&
        item.sonStatus == '71' &&
        isTimedOut(item.callTimestart)
      "
    >
      <view class="disFlxAC flexEnd pa-15 borderT">
        <view class="btnBox">
          <u-button
            type="primary"
            shape="circle"
            :customStyle="{ height: '52rpx', fontSize: '28rpx' }"
            @click="callNow(item)"
            >再次呼叫</u-button
          >
        </view>
      </view>
    </template>

    <StatusPopup :show="czShow" type="error" btnText="去充值" @close="czShow = false" @confirm="goRecharge()">
      <view class="pt-20">您的余额不足，请充值</view>
    </StatusPopup>

    <u-modal :show="receiptShow" @confirm="confirmReceipt" title="提示" confirmText="已收到" @cancel="receiptShow = false" showCancelButton ref="uModal" :asyncClose="true">
      <div>您是否已收到订单相关商品？</div>
    </u-modal>
  </view>
</template>

<script>
import StatusPopup from "../components/statusPopup.vue"
import orderApi from "@/api/order.js";
const dayjs = require("dayjs");

export default {
  props: {
    // 订单列表 || 订单详情
    page: {
      type: String,
      default: "orderList",
    },
    // 订单对象
    item: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      czShow: false,
      receiptShow: false,
      receiptParams: {},
    }
  },
  components: {StatusPopup},
  computed: {
    // 用户信息
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  methods: {
    // 去充值
    goRecharge() {
      this.czShow = false;
      this.goPage(
        `/pagesC/recharge/index?czPlice=${
          this.item.cost - this.userInfo.balance
        }`
      );
    },
    // 立即支付订单
    orderPlay(item) {
      const that = this;
      if (that.userInfo.balance < item.cost) {
        that.czShow = true
        return;
      }
      orderApi.callConfirmOrder({ orderid: item.id }).then((res) => {
        uni.showToast({
          title: "支付成功",
          icon: "none",
        });
        that.$emit("upList");
      });
    },
    // 取消订单
    cancelOrder(item) {
      const that = this;
      let closeText = (item.sonStatus == "10" || item.sonStatus == "11") ? '关闭' : '取消'
      uni.showModal({
        content: `${closeText}订单后，订单将无法再操作。是否要${closeText}订单？`,
        success: function (res) {
          if (res.confirm) {
            orderApi.roomcancel({ order_id: item.id }).then((res) => {
              uni.showToast({
                title: `${closeText}成功`,
                icon: "none",
              });
              that.$emit("upList");
            });
          }
        },
      });
    },

    // 判断是否超过24小时
    isTimedOut(otime) {
      const date1 = dayjs(otime);
      const date2 = dayjs().format("YYYY-MM-DD HH:mm:ss");
      const pastTime = date1.diff(date2, "hour");
      return pastTime <= -24 ? false : true;
    },
    // 呼叫
    callNow(item) {
      const that = this;
      that.$store.commit("SET_CELLINFO", {
        orderNo: item.orderNo,
        meetingRoomNumber: item.meetingRoomNumber,
        password: item.invitation,
        id: item.expList[0].id,
        userName: item.expList[0].userName,
        headimg: item.expList[0].headimg,
      }); // 呼叫信息
      that.goPage("/pagesB/meeting/callPanel?meetingStatus=1");
    },

    // 加入会议
    joining(item) {
      const that = this;
      uni.showLoading({ title: "加载中" });
      that.$store.dispatch("getUserInfo").then(() => {
        that.$store.dispatch("loginXy"); // 登录小鱼
        setTimeout(() => {
          that.$store.commit("SET_CELLINFO", {
            orderNo: item.orderNo,
            meetingRoomNumber: item.meetingRoomNumber,
            password: item.invitation,
            id: item.expList[0].id,
            userName: item.expList[0].userName,
            headimg: item.expList[0].headimg, 
          }); // 呼叫信息

          // 消息体,会话页面所需信息
          this.$store.commit("SET_CURRENTMESSAGE", {
            data: {
              hostId: item.sponsorid,
              imGroupId: item.groupid,
              meetingNum: item.meetingRoomNumber,
              meetingPwd: item.invitation
            },
          });
          uni.hideLoading();
          that.goPage(`/pagesB/meeting/index`);
        }, 1500);
      });
    },
    signIn(item) {
      const that = this;
      orderApi.orderAutograph({ orderid: item.id }).then((res) => {
        that.$emit('sginSuccess', item.id);
        that.$emit("upList");
      });
    },
    // 确认收货
    openConfirmReceipt(item) {
      this.receiptParams = {
        id: item.mailingInfo.id,
        orderId: item.id,
        mailingStatus: 3 // 邮寄状态: 0无 1待发货 2已发货 3已收货
      };
      this.receiptShow = true;
    },
    confirmReceipt() {
      orderApi.updateMailing(this.receiptParams).then(res=>{
        this.receiptShow = false;
        this.$emit("upList");
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.btnBox {
  width: 165rpx;
}
.btnBox + .btnBox {
  margin-left: 30rpx;
}

</style>